<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="col-md-8 col-md-offset-2" th:if="${message}">
    <h2 th:text="${message}"></h2>
</div>

<div class="col-md-8 col-md-offset-2">
    <form method="POST" action="/file/" enctype="multipart/form-data">
        <!-- COMPONENT START -->
        <input type="file" name="file" class="input-ghost" style="visibility:hidden; height:0">
        <div class="form-group">
            <div class="input-group input-file" name="Fichier1">
                <input type="text" class="form-control" placeholder="Choose a file...">
                <span class="input-group-btn">
                   <button class="btn btn-default btn-choose" type="button">Choose</button>
   		    </span>
            </div>
        </div>
        <!-- COMPONENT END -->
        <div class="form-group">
            <button type="submit" class="btn btn-primary pull-right">Submit</button>
            <button type="reset" class="btn btn-danger">Reset</button>

        </div>
        <button id="post"><h1>POST</h1></button>
    </form>
</div>

<div class="col-md-8 col-md-offset-2">
    <ul>
        <li th:each="linker: ${linkers}">
            <a th:href="${linker.fileUrl}" th:text="${linker.fileName}"></a>
        </li>
    </ul>
</div>

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    function bs_input_file() {
        $(".input-file").before(
            function() {
                if ( ! $(this).prev().hasClass('input-ghost') ) {
                    var element = $(".input-ghost");
                    element.change(function(){
                        element.next(element).find('input').val((element.val()).split('\\').pop());
                    });
                    $(this).find("button.btn-choose").click(function(){
                        element.click();
                    });
                    $(this).find("button.btn-reset").click(function(){
                        element.val(null);
                        $(this).parents(".input-file").find('input').val('');
                    });
                    $(this).find('input').css("cursor","pointer");
                    $(this).find('input').mousedown(function() {
                        $(this).parents('.input-file').prev().click();
                        return false;
                    });
                    return element;
                }
            }
        );
    }
    $(function() {
        bs_input_file();
        $("#post").click(function () {
            // $.ajax({
            //     type:"post",
            //     data: {fileName:"controller_ (49)"},
            //     contentType: "application/json",
            //     url:"http://localhost:8081/file/files/xxx",
            //     success: function(data){
            //         console.log(data);
            //     },
            // })
            $.ajax({
                type: "POST",
                url: "http://localhost:8081/file/files/xxx",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify({"fileName":"controller_ (49)"}),
                dataType: "json",
                success:function (message) {
                    alert("提交成功"+JSON.stringify(message));
                },
                error:function (message) {
                    alert("提交失败"+JSON.stringify(message));
                }
            });
        })

    });
</script>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css">
</body>
</html>
